<template>
  <div>
    <carts class="carts" :class="show?'cart_show':''"></carts>
    <div class="cart_image" @click="showCarts">
      <img src="../assets/images/cart.png" style="width:60px;height:60px;" />
    </div>
    <div class="right">
      <div class="total">￥{{total}}</div>
      <nav style="float:right">
        <div class="button">选好了</div>
      </nav>
    </div>
  </div>
</template>

<script>
import Carts from "./Carts.vue";

export default {
  created() {
    this.$bus.$on("closeCarts", boolean => this.show = boolean);
    this.$bus.$on("setTotal",value=>this.total=value);
  },
  components: {
    Carts
  },
  data() {
    return {
      show: false,
      total:0
    };
  },
  methods: {
    showCarts: function() {
      this.show = !this.show;
    }
  }
};
</script>

<style scoped>
.cart_image {
  position: absolute;
  bottom: 0;
  left: 10px;
  z-index: 2;
}
.right{
  display: flex;
  flex-direction: row;
  justify-content: space-between
}
.total {
  margin-left: 80px;
  font: bold 14px/50px "宋体";
  height: 50px;
}
.button {
  width: 100px;
  font: 20px/50px "宋体";
  height: 50px;
  background-color: #d81e06;
  color: white;
  text-align: center;
}
.carts {
  height: 0px;
  opacity: 0;
  transition: 0.5s;
}
.cart_show {
  height: auto;
  opacity: 1;
}
</style>